import React, {useEffect} from 'react';
import Highlighter from 'react-highlight-words';
import { Layout, Menu, Card ,Row ,Col ,Table ,Button ,Space ,Input } from 'antd';
import {
    SearchOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import './index.css'
import icon_lian from "../../../picture/蒋廉.png";
import icon_liu from "../../../picture/刘安平.png";

export default function InfoManage() {
    const [searchText, setSearchText] = React.useState("");
    const [searchedColumn, setSearchedColumn] = React.useState("");
    const [searchInput, setSearchInput] = React.useState("");
    const [pagination,setPagination] = React.useState({
        pageSize: 5,
    })
    const data = [
        {
            key: '1',
            name: '刘安平',
            age: 20,
            address: '西南科技大学',
            id:5120193531,
        },
        {
            key: '2',

            name: '蒋廉',
            age: 21,
            address: '西南科技大学',
            id:5120193530,
        },
        {
            key: '3',
            name: '王一',
            age: 22,
            address: '西南科技大学',
            id:5120193527,
        },
        {
            key: '4',
            name: '王二',
            age: 23,
            address: '西南科技大学',
            id:5120193533,
        },
        {
            key: '5',
            name: '王三',
            age: 22,
            address: '西南科技大学',
            id:5120193532,
        },
        {
            key: '6',
            name: '王四',
            age: 24,
            address: '西南科技大学',
            id:5120193535,
        },
        {
            key: '7',
            name: '王五',
            age: 25,
            address: '西南科技大学',
            id:5120193536,
        },
        {
            key: '8',
            name: '刘一',
            age: 22,
            address: '西南科技大学',
            id:5120193547,
        },
        {
            key: '9',
            name: '刘二',
            age: 28,
            address: '西南科技大学',
            id:5120193538,
        },
        {
            key: '10',
            name: '刘三',
            age: 24,
            address: '西南科技大学',
            id:5120193519,
        },

        {
            key: '11',
            name: '蒋廉',
            age: 23,
            address: '西南科技大学',
            id:5120193566,
        },

    ];

    const cet6Data = [{
        key: '1',
        name: '王维',
        age: '20',
        sex:'男',
        id: '1234567890',
        address:'清华大学',
        status:'未修改',
        icon:icon_lian,
    },
        {
            key: '2',
            name: '李一',
            sex:'男',
            age: 21,
            id: '1234567891',
            address:'北京大学',
            status: '未修改',
            icon:icon_liu,
        },{
            key: '3',
            name: '张一',
            age: '20',
            sex:'男',
            id: '1234567890',
            address:'清华大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '4',
            name: '张二',
            sex:'男',
            age: 21,
            id: '1234567891',
            address:'北京大学',
            status: '未修改',
            icon:icon_liu,
        },{
            key: '张三',
            name: '王维',
            age: '20',
            sex:'男',
            id: '1234567890',
            address:'清华大学',
            status:'未修改',
            icon:icon_lian,
        },
        {
            key: '6',
            name: '张四',
            sex:'男',
            age: 21,
            id: '1234567891',
            address:'北京大学',
            status: '未修改',
            icon:icon_liu,
        }];

    let getColumnSearchProps;
    getColumnSearchProps = dataIndex => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => {
                        setSearchInput(node);
                    }}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        Search
                    </Button>
                    <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        Reset
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            confirm({ closeDropdown: false });
                            setSearchedColumn(dataIndex);
                            setSearchText(selectedKeys[0]);
                        }}
                    >
                        Filter
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
        onFilter: (value, record) =>
            record[dataIndex]
                ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
                : '',
        onFilterDropdownVisibleChange: visible => {
            if (visible && searchInput) {
                console.log(searchInput);
                setTimeout(() => searchInput.select(), 100);
            }
        },
        render: text =>
            searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
    });

    function handleSearch(selectedKeys, confirm, dataIndex) {
        confirm();
        setSearchedColumn(dataIndex);
        setSearchText(selectedKeys[0]);
    };

    function handleReset(clearFilters) {
        clearFilters();
        setSearchText('');
    };


    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: '15%',
            className:"size",
            align: 'center',
            ...getColumnSearchProps('name'),
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            width: '20%',
            className:"size",
            align: 'center',
            ...getColumnSearchProps('age'),
            sorter: (a, b) => a.age - b.age,
            sortDirections: ['descend', 'ascend'],
        },
        {
            title: '报考考点',
            dataIndex: 'address',
            key: 'address',
            width: '20%',
            className:"size",
            align: 'center',
            ...getColumnSearchProps('address'),
        },
        {
            title: '身份证号码',
            dataIndex: 'id',
            key: 'id',
            width: '20%',
            align: 'center',
            className:"size",
            ...getColumnSearchProps('id'),
            sorter: (a, b) => a.id - b.id,
            sortDirections: ['descend', 'ascend'],
        }
    ];
    return (
        <Card title="四六级报名信息汇总" headStyle={{ fontSize: 30 }}>
            <Row gutter={24}>
                <Col span={12}>
                    <Card className="cetCard" title="四级报名信息" headStyle={{ fontSize: 20 }}>
                        <Table columns={columns} dataSource={data} pagination={pagination}/>
                    </Card>
                </Col>
                <Col span={12}>
                    <Card className="cetCard" title="六级报名信息" headStyle={{ fontSize: 20 }}>
                        <Table columns={columns} dataSource={cet6Data}  pagination={pagination} />
                    </Card>
                </Col>
            </Row>
        </Card>
    )

}
export { InfoManage }